<template>
    <div :id="`checkcitybox-${name}`" :ref="`checkcitybox-${name}`" :class="['checkcity', {'checkcityclick': show}]" @click="checkme" style="width:200px">
        <input style="display:none" :value="value" @input="$emit('input', $event.target.value)">
        <span class="checkcity-value" v-if="value[0]">{{city}}</span>
        <span class="checkcity-placeholder" v-else>请选择省、市、区</span>
        <Icon v-if="value[0]" class="close" type="ios-arrow-down"  @click.stop @click="close"></Icon>
        <Icon v-else type="ios-arrow-down"></Icon>
        <div :ref="`checkcity-${name}`" :style="style">
            <div class="checkcity-fixed" v-if="show" @click="show=false"></div>
            <div class="checkcity-con" @click.stop v-if="show">
                <Tabs v-model="citys" name="city" :animated="false">
                    <TabPane label="省" name="province" tab="city">
                        <jgoptioncity type="province" :value="value" @checkoption="checkoptionprovince"></jgoptioncity>
                    </TabPane>
                    <TabPane label="市" name="city" :disabled="!value[1] && !value[0]" tab="city">
                        <jgoptioncity  type="city" :value="value" @checkoption="checkoptioncity"></jgoptioncity>
                    </TabPane>
                    <TabPane label="区县" name="county" :disabled="!value[2] && !value[1]" tab="city">
                        <jgoptioncity type="county" :value="value" @checkoption="checkoptioncounty"></jgoptioncity>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
</template>
<script>
    import { commonprovincelist } from '@/api/hqapi/city';
    import jgoptioncity from './optioncity';
    export default {
        components: { jgoptioncity },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: [Array],
                default: function() {
                    return [];
                }
            },
            name: {
                type: [String],
                default: ''
            }
        },
        data() {
            return {
                show: false,
                citys: 'province',
                values: [],
                datas: [],
                style: {},
                check: false
            };
        },
        computed: {
            city() {
                let citys = '';
                if(this.value[0]) {
                    this.datas.forEach(province => {
                        if(+province.value == +this.value[0]) {
                            citys += province.label;
                            this.citys = 'city';
                            if(this.value[1]) {
                                province.children.forEach(city => {
                                    if(+city.value == +this.value[1]) {
                                        citys += `/${city.label}`;
                                        this.citys = 'county';
                                        if(this.value[2]) {
                                            city.children.forEach(county => {
                                                if(+county.value == +this.value[2]) {
                                                    citys += `/${county.label}`;
                                                    return citys;
                                                }
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    });
                }
                return citys;
            }
        },
        mounted() {
            this.values = this.value;
            let citytime = this.storage.get('citytime');
            if(citytime) {
                if(this.$Date(this.$Date()).diff(citytime, 'day') > 30) {
                    this.askData();
                }else {
                    this.datas = this.storage.get('cityarray');
                }
            }else {
                this.askData();
            }
        },
        methods: {
            checkme() {
                if(!this.value[0]) this.citys = 'province';
                else if(!this.value[1]) this.citys = 'city';
                else this.citys = 'county';
                this.show = true;
                this.$nextTick(() => {
                    this.check = true;
                    const body = document.querySelector('body');
                    let checkcity = this.$refs[`checkcity-${this.name}`];
                    if(body.append) {
                        body.append(checkcity);
                    }else {
                        body.appendChild(checkcity);
                    }
                    this.style = { top: 0, bottom: 0, position: 'absolute' };
                    let width = document.body.clientWidth; // 1350
                    let height = document.body.clientHeight; // 937
                    var box = this.$refs[ `checkcitybox-${this.name}`].getClientRects();
                    if(height - box[0].bottom < 454 && width - box[0].left < 400) {
                        this.style = { left: `${box[0].left - 200}px`, top: `${box[0].top - 464}px`, position: 'absolute' };
                    }else if(height - box[0].bottom < 454) {
                        this.style = { left: `${box[0].left}px`, top: `${box[0].top - 464}px`, position: 'absolute' };
                    }else if(width - box[0].left < 400) {
                        this.style = { left: `${box[0].left - 200}px`, top: `${box[0].top + 30}px`, position: 'absolute' };
                    }else {
                        this.style = { left: `${box[0].left}px`, top: `${box[0].top + 30}px`, position: 'absolute' };
                    }
                });
            },
            close() {
                this.citys = 'province';
                this.$emit('cityvalue', []);
            },
            askData() {
                commonprovincelist().then(res => {
                    this.storage.set('citytime', this.$Date().format('YYYY-MM-DD'));
                    this.storage.set('cityarray', res.data);
                });
            },
            checkoptionprovince(value) {
                this.values = [];
                if(value) {
                    this.$set(this.values, 0, value);
                    this.$emit('cityvalue', this.values);
                }else {
                    this.$set(this.values, 0, '');
                    this.$set(this.values, 1, '');
                    this.$set(this.values, 2, '');
                    this.$emit('cityvalue', []);
                }
            },
            checkoptioncity(value) {
                if(value) {
                    this.$set(this.values, 1, value);
                }else {
                    this.$set(this.values, 1, '');
                    this.$set(this.values, 2, '');
                }
                this.$emit('cityvalue', this.values);
            },
            checkoptioncounty(value) {
                if(value) {
                    this.$set(this.values, 2, value);
                    this.show = false;
                }else {
                    this.$set(this.values, 2, '');
                }
                this.$emit('cityvalue', this.values);
            }
        }
    };
</script>
<style lang="less" scoped>
.checkcityclick {
    .ivu-icon {
        transform: translateY(-50%) rotate(180deg)!important;
        display: inline-block;
    }
}
.checkcity {
    height: 32px;
    position: relative;
    display: block;
    box-sizing: border-box;
    outline: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdee2;
    transition: all 0.2s ease-in-out;
    &-placeholder {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 24px;
        color: #999;
    }
    &-value{
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 24px;
    }
    &-fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 10000;
    }
    &-con{
        position: absolute;
        width: 400px;
        background-color: #fff;
        z-index: 10001 !important;
        margin: 5px 0;
        height: 454px;
        padding: 16px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    }
    &-cons{
        position: absolute;
        padding: 16px;
        width: 400px;
        background-color: #fff;
        z-index: 10001;
        margin: 5px 0;
        height: 454px;
        padding: 16px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    }
    .close:hover{
        &:before{
            content: '\f177'
        }
    }
    .ivu-icon-ios-arrow-down {
        position: absolute;
        top: 50%;
        right: 8px;
        line-height: 1;
        transform: translateY(-50%);
        font-size: 14px;
        color: #808695;
        transition: all 0.2s ease-in-out;
    }
}
</style>
